<template>
    <view>
        <view class="amount" v-if="dataInfo&&dataInfo.order_info">
            <text>￥</text>{{dataInfo.order_info.pay_price}}
        </view>
        <view class="pay-tips">支付金额</view>

        <view class="pay-info-item">
            <view class="film-title" v-if="dataInfo&&dataInfo.movieInfo">{{dataInfo.movieInfo.name}}</view>
            <!-- <view class="film-text">5月29日 2021-09-29 11:00:00~2021-09-29</view> -->
            <view class="film-text" v-if="dataInfo&&dataInfo.movieInfo">{{dataInfo.movieInfo.cinemaName}}</view>
            <view class="film-text" v-if="dataInfo">{{dataInfo.cinema_address}}</view>
            <view class="film-text" v-if="dataInfo&&dataInfo.movieInfo">{{dataInfo.movieInfo.hallName}}</view>
            <view class="film-text">
                <text v-for="(value,index) in dataInfo.showInfor" :key="index">{{value.seatName}},</text>
            </view>
        </view>

        <view class="pay-item" v-for="item,index in payList" @click="onPayWay(item,index)">
            <view class="item-left">
                <image :src="item.payment_icon"></image>
                <text>{{ item.payment_name }}</text>
            </view>
            <!-- <image :src="$imgUrl + 'images/icon-choice-yes.png'" class="pay-check"></image> -->
            <view class="check">
                <text class="iconfont" :class="PayWay === index ? 'icon-checked action' : 'icon-check'"></text>
            </view>
        </view>
        <view class="pay-btns" @click="onSubmit">确认支付</view>
    </view>
</template>

<script>
import { confirmPay } from "@/api/movie.js"
export default {
    data() {
        return {
            dataInfo: {
                // price: 45,
                // movie_info: {
                //     movie_name: "长津湖之水门桥",
                //     cinemaAddress: "丹东市东港市育才街(近教育局)(东港市联营胡同北0.1米)",
                //     cinemaId: 25249,
                //     cinemaName: "博纳电影院线·星鑫古汉店",
                // },
                // showInfor: [
                //     { seatName: '6排7座' },
                //     { seatName: '6排6座' }
                // ]
            },
            $imgUrl: this.$imgUrl,
            payList: [],
            PayWay: 0,
            form: {},
            pageType: 4,// 1订单发起支付  2商品直接支付  3服务详情  4电影票支付
        }
    },
    onLoad(query) {
        // this.getData(opt.orderNo)
        wx.enableAlertBeforeUnload({
            message: "确定放弃支付吗?",
            success: (res) => {
                console.log("成功：", res);
            },
            fail: (err) => {

            },
        });
        if (query) {
            this.dataInfo = JSON.parse(decodeURIComponent(query.dataList))
            this.payList = this.dataInfo.order_info.order_payment
            this.form = this.payList[0]
            console.log(this.dataInfo, "page-pay")
        }
    },
    onUnload() {
        uni.reLaunch({
            url: "/pagesB/movie/my-ticket"
        })
    },
    methods: {
        /**
       * 支付方式切换点击
       */
        onPayWay(item, index) {
            this.PayWay = index;
            this.form = item
            console.log(this.form, 1111)
        },

        onSubmit() {
            // #ifndef MP-WEIXIN
            if (this.form.payment_type == "wechat_app") {
                this.wxPay()
            } else if (this.form.payment_type == "alipay_app") {
                this.zfbPay()
            }
            // #endif
            // #ifdef MP-WEIXIN
            this.wxMiniPay()
            // #endif
        },

        wxMiniPay() {
            confirmPay({
                payment_id: this.form.payment_id,
                order_no: this.dataInfo.order_info.order_no
            }).then((res) => {
                let data = res.data.pay_data.minipay_data
                wx.requestPayment({
                    timeStamp: data.timeStamp,
                    nonceStr: data.nonceStr,
                    package: data.package,
                    signType: 'MD5',
                    paySign: data.paySign,
                    success: (res) => {

                        console.log(res,"res支付成功")
                        if (res.errMsg == "requestPayment:ok") {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'none'
                            })
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: "/pagesA/mall/payResult?type=success&pageType=" +
                                        this.pageType
                                })
                            }, 500)
                        }
                    },
                    fail: (error) => {
                        if (error.errMsg == "requestPayment:fail cancel") {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            })
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: "/pagesA/mall/payResult?type=fail&pageType=" +
                                        this.pageType
                                })
                            }, 500)
                        }
                    }
                })
            })
        },
    }
}
</script>
<style>
page {
  background-color: #f4f5f7;
}
</style>
<style lang="scss" scoped>
.amount {
  text-align: center;
  padding-top: 80rpx;
  color: #fe602b;
  font-size: 72rpx;
  font-weight: 550;
  text {
    font-size: 36rpx;
  }
}
.pay-tips {
  text-align: center;
  color: #636775;
  font-size: 28rpx;
  margin-top: 6rpx;
}
.pay-info-item {
  margin: 70rpx 32rpx 0rpx 32rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 32rpx;
  .film-title {
    color: #2d3039;
    font-size: 36rpx;
    font-weight: 550;
    padding-bottom: 8rpx;
  }
  .film-text {
    margin-top: 12rpx;
    color: #636775;
    font-size: 28rpx;
  }
}

.pay-item {
  margin: 20rpx 25rpx 0rpx 25rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 26rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item-left {
    display: flex;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
    text {
      color: #2d3039;
      font-size: 28rpx;
      margin-left: 20rpx;
    }
  }
  .pay-check {
    margin-left: auto;
    width: 36rpx;
    height: 36rpx;
  }
  .check {
    display: flex;
    align-items: center;

    text {
      font-size: 42rpx;
      color: #c0c0c0;
    }

    .action {
      color: $base;
    }
  }
}

.pay-btns {
  position: fixed;
  bottom: 50rpx;
  left: 32rpx;
  right: 32rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: $base;
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 550;
}
</style>
